{include file="public/header"}
<style scoped>
    .el-select-dropdown {
      padding: 0;
    }
    .dialog-footer{
        margin-top: 20px;
    }
    </style>
 {include file="public/style"}
    
          <el-card  shadow="never"  >   
            <el-tabs v-model="activeName" type="border-card"   @tab-click="handleClick" >
                <el-tab-pane  label="添加采购单"  name="addpurchase">
                    <el-card shadow="never">
                        <el-form :model="searchForm" :rules="purchaseRules" ref="refsearchForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="采购员" prop="buyer_id">
                                <el-select :inline="true" v-model="searchForm.buyer_id" filterable placeholder="请选择采购员" >
                                    <el-option v-for="item in buyers" :key="item.id" :label="item.nickname" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                         
                            <el-form-item label="仓库" prop="storage">
                                <el-select :inline="true" v-model="searchForm.storage" filterable placeholder="请选择仓库" >
                                    <el-option v-for="item in storages" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>


                            <!-- <el-form-item label="平台" prop="platform">
                                <el-select :inline="true" v-model="searchForm.platform" filterable placeholder="请选择平台" >
                                    <el-option v-for="(platform_name,platform_id) in platforms" :key="platform_id" :label="platform_name" :value="platform_id">
                                    </el-option>
                                </el-select>
                            </el-form-item> -->

                            <el-form-item label="业务员" prop="user_id">
                                <el-select :inline="true" v-model="searchForm.user_id" filterable placeholder="请选择业务" >                               
                                    <el-option v-for="item in users" :key="item.id" :label="item.nickname" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="需采购商品" prop="">
                                <el-button type="success" size="mini" @click="newProductVisible" plain :close-on-click-modal="false">添加商品</el-button>
                            </el-form-item>                     
                            
                            <!-- 表格 -->
                            <el-table :data="dataList" :rules="purchaseNumRules" ref="datalistref" border v-if="dialogFormtable">
                                <el-table-column prop="img" label="商品图片" min-width="80">
                                    <template v-slot="{row}">
                                        <el-image style="width: 100px; height: 100px" :src="row.img" fit="scale-down" :preview-src-list="[row.img]" referrerpolicy="no-referrer"></el-image>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="localsku" label="localSku"  min-width="80"></el-table-column>

                                <el-table-column prop="num" label="采购数量" min-width="100"  >
                                <template v-slot="{row}">
                                    <el-input-number v-model="row.num" :min="1"  label="采购数量"></el-input-number>
                                </template>
                                </el-table-column>

                                <el-table-column prop="product_id" label="操作"  min-width="80">
                                    <template v-slot="{row,$index}">
                                    <el-button type="danger" v-model="row.product_id" size="mini" @click="delProducts(row,$index)">删除</el-button>
                                    </template>
                                </el-table-column>                                
                            </el-table>   
                            <el-form-item>
                            <el-button type="primary" @click="submitForm()"  class="dialog-footer">提交</el-button>                     
                           </el-form-item>
                        </el-form>

                         <!-- 弹窗 -->
                        <el-dialog title="添加商品" :visible.sync="dialogFormVisible"  width="60%" :close-on-click-modal="false">
                            <el-form :inline="true" :model="searchSkuForm" size="mini" :rules="searchrulesva" ref="refsearchForms" >
                                <el-form-item label="本地SKU" prop="localsku">
                                    <el-input v-model="searchSkuForm.localsku" placeholder="输入款号"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary"   @click="getDatalists" plain >查询</el-button>
                                </el-form-item>
                            </el-form>

                            <el-table :data="skuList" @selection-change="handleSelectProductChange"  border>
                                <el-table-column type="selection"  width="55"></el-table-column>
                                <el-table-column prop="img" label="产品图片">
                                    <template v-slot="{row}">
                                        <el-image style="width: 100px; height: 100px" :src="row.img" fit="scale-down" :preview-src-list="[row.img]"  referrerpolicy="no-referrer"></el-image>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="localsku" label="LocalSKU"  min-width="150"></el-table-column>
                            </el-table>
                            <div class="dialog-footer">
                                <el-button type="primary"   size="min" @click="addProduct">添加商品</el-button>
                            </div>
                        </el-dialog>

                    </el-card>   
                </el-tab-pane>
                <el-tab-pane  label="批量导入采购单"  name="excelpurchase">
                </el-tab-pane>
            </el-tabs>         
        </el-card>
    </div>      


    <script>
        new Vue({
            el: '#app',
            data: function () {
                return { 
                    activeName: 'addpurchase',
                    dialogFormVisible:false,
                    buyers:{$buyerinfo|raw},//采购员
                    storages:{$storagelist|raw},//仓库
                    platforms:[],//平台                   
                    dataList:[],                  
                    skuList:[] ,            
                    users:{$userinfo|raw },//业务
                    dialogFormtable:false,            
                    searchForm:{                                    
                        storage:'',           
                        user_id:'',                        
                        buyer_id:'',
                    
                           
                    },
                    selectProduct: [],//选择的产品                   
               
                   searchSkuForm:{
                        localsku:'',
                        type:'5'
                   },             
                    purchaseNumRules:{
                        num:[
                            { required: true, message: '数量不能为空', trigger: 'blur' }
                        ],
                    },
                    purchaseRules: {
                        buyer_id: [
                            { required: true, message: '请选择采购员', trigger: 'change' },
                        ],
                        storage: [
                            { required: true, message: '请选择仓库', trigger: 'change' }
                        ],
                    
                        user_id: [
                            { required: true, message: '请选择业务员', trigger: 'change' }
                        ],
                    
                    },
                     searchrulesva:{
                        localsku: [
                            { required: true, message: '款号不能为空', trigger: 'blur' }
                        ],
                    },
                 }                   
                   
                
            },
            mounted(){                         
            },
            methods: {       
                  
                //点击tab切换
               handleClick(tab, event) {
                    window.location.href = '/admin/purchase/import_purchase';                    
                },
               
                 //点击提交采购
                async submitForm() {   
                    this.$refs.refsearchForm.validate(async valid => {
                    if (!valid) return
                        for(let i in this.dataList){
                            if (this.dataList[i].num == undefined){
                                return this.$message.error(this.dataList[i].localsku+'数量不能为空！');
                            }
                        }
                    const res = await axios.post('/admin/Purchase/addpurchase',{baseinfo:this.searchForm,datalist:this.dataList})
                      if (res.status !== 1) return this.$message.error(res.info);
                      this.$message.success('添加成功')
                      this.searchFor={}
                      this.dataList=[]
                    });
                },
                //删除商品
                delProducts(row,ids){
                    if (row.id){
                        for (let i in this.dataList){
                            if (row.id == this.dataList[i].id){
                                this.dataList.splice(ids,1)
                            }
                        }
                    }
                },
                //添加商品
                addProduct(){
                    if (this.selectProduct.length<=0){
                            return this.$message.error('请至少选择一个商品');
                        }
                
                    //判断两个数组里的值是否有重复，有相同的sku的就无法添加
                    if (this.dataList.length == 0) {
                        this.dataList = this.selectProduct
                    }else {
                        for(let i in this.dataList){
                            for (let j in this.selectProduct){
                                if( this.dataList[i].id == this.selectProduct[j].id){
                                    return this.$message.error('已存在重复SKU，请检查');
                                }
                            }
                        }
                        console.log(this.dataList)
                        this.dataList.push.apply(this.dataList,this.selectProduct);               
                    }
                    this.dialogFormtable=true
                    this.dialogFormVisible=false
                },
                //添加商品弹窗  
                newProductVisible(){
                    this.selectProduct=[]                  
                     this.skuList =[]
                    this.searchSkuForm.localsku=''
                    this.dialogFormVisible=true
                   
                },
                //获取商品列表
                async handleSelectProductChange(res)
                {
                    this.selectProduct = res                   
                },
              //查询产品信息
              async getDatalists() {
                this.$refs.refsearchForms.validate(async valid => {
                    if (!valid) return
                    const res = await axios.post('/admin/Products/product_list',{type: this.searchSkuForm.type,localsku: this.searchSkuForm.localsku})
                    if (res.status !== 1) return this.$message.error(res.info);
                    this.skuList = res.info
                    this.$message.success('查询成功！')
                });
            },
                
               
            }
        })
     </script>
</body>    
 </html>
      